<template>
  <div class="personBox">
    <p class="personalTitle">{{personalTitle}}<span class="carrierStr">{{carrierStr}}</span></p>
    <div class="contentBox">
      <div class="contentLeft">
        <p class="workBlock">{{workBlock}}</p>
        <el-table
            :data="tableData"
            style="width: 75%"
            height="96">
          <el-table-column
              prop="Inquiry"
              label="待处理询价单"
              width="111">
          </el-table-column>
          <el-table-column
              prop="pendingOrder"
              label="待处理订单"
              width="101">
          </el-table-column>
          <el-table-column
              prop="unconfirmed"
              label="待确认回单"
              width="101">
          </el-table-column>
          <el-table-column
              prop="unsettled"
              label="待处理结算单"
              width="120">
          </el-table-column>
          <el-table-column
              prop="track"
              label="在途跟踪"
              width="101">
          </el-table-column>
          <el-table-column
              prop="abnormal"
              label="异常订单"
              width="101">
          </el-table-column>
          <el-table-column
              prop="contract"
              label="待确认合同"
              width="101">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="contentBox2">
      <p class="workBlock">{{trackStr}}</p>
      <div class="filter">
        <el-select class="inputCont" v-model="trackValue"
                   filterable
                   size="mini"
                   placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-input size="mini" class="inputCont" v-model="trackInput" placeholder="请输入内容"></el-input>
        <div class="departure">
          <p>下单时间:{{ startTimeValue }}</p>
          <el-date-picker
              class="pickerTime"
              v-model="startTimeValue"
              type="date"
              size="mini"
              placeholder="开始日期"
              format="YYYY 年 MM 月 DD 日">
          </el-date-picker> -
          <el-date-picker
              class="pickerTime"
              v-model="endTimeValue"
              type="date"
              size="mini"
              placeholder="结束日期"
              format="YYYY 年 MM 月 DD 日">
          </el-date-picker>
        </div>
        <el-button size="mini" icon="el-icon-search" circle></el-button>
      </div>
      <div class="trackResult">
        <el-table
            :data="trackData"
            style="width: 100%">
          <el-radio
            prop="xuanze"
            label="选择"
　　　　　　　v-model="isChoose"
            width="55"
          >
　　　　　　</el-radio>
          <el-table-column
              prop="dingdanhao"
              label="订单号"
              width="100"
          >
          </el-table-column>
          <el-table-column
              prop="xiadanriqi"
              label="下单日期"
              width="110">
          </el-table-column>
          <el-table-column
              prop="yundanhao"
              label="运单号"
              width="110">
          </el-table-column>
          <el-table-column
              prop="shouhuofang"
              label="收货方"
              width="100">
          </el-table-column>
          <el-table-column
              prop="shouhuoren"
              label="收货人"
              width="100">
          </el-table-column>
          <el-table-column
              prop="shifa"
              label="始发"
              width="80">
          </el-table-column>
          <el-table-column
              prop="daoda"
              label="到达"
              width="80">
          </el-table-column>
          <el-table-column
              prop="chepai"
              label="车牌"
              width="100">
          </el-table-column>
          <el-table-column
              prop="yunzuozhuangtai"
              label="运作状态"
              width="80">
          </el-table-column>
          <el-table-column
              prop="jihuafache"
              label="计划发车时间"
              width="120">
          </el-table-column>
          <el-table-column
              prop="shijifache"
              label="实际发车时间"
              width="120">
          </el-table-column>
          <el-table-column
              prop="yujidaoda"
              label="预计到达时间"
              width="120">
          </el-table-column>
          <el-table-column
              prop="xingshisudu"
              label="行驶速度(km/h)"
              width="80">
          </el-table-column>
          <el-table-column
              prop="genzongshijian"
              label="跟踪时间"
              width="120">
          </el-table-column>
        </el-table>
        <el-pagination
            class="el-pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            v-model:currentPage="currentPage"
            :page-sizes="[5,10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.trackData.length">
        </el-pagination>
      </div>
    </div>
    <div class="contentBox2">
      <p class="workBlock">{{dataStatistics}}</p>
      <div>
        <el-table
            class="echartData"
            :data="echartsData"
            border
            style="width: 33%;height: 146px;">
          <el-table-column
              prop="yanse"
              label="颜色"
              width="width:25%;height:16%;">
          </el-table-column>
          <el-table-column
              prop="leixing"
              label="类型"
              width="width:25%;height:16%;">
          </el-table-column>
          <el-table-column
              prop="danshuzongji"
              label="单数总结"
              width="width:25%;height:16%;">
          </el-table-column>
          <el-table-column
              prop="jine"
              label="金额"
              width="width:25%;height:16%;">
          </el-table-column>
        </el-table>
      </div>
      <!--echarts图表-->
      <div style="width:990px;height:450px;background-color: white" ref="chart"></div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
const echarts = require("echarts")
export default {
  name: 'Home',
  data () {
    return {
      isChoose: false,
      personalTitle: "万事达-TMS",
      carrierStr: "承运商",
      startTimeValue: "", //开始时间
      endTimeValue: "", //结束时间
      trackStr: "在途跟踪",
      dataStatistics: "数据统计",
      workBlock: "工作看板",
      trackInput: "",
      echartsData: [{
        yanse: "黑色",
        leixing: "下单数",
        danshuzongji: "10",
        jine: "552"
      }, {
        yanse: "黑色",
        leixing: "下单数",
        danshuzongji: "10",
        jine: "552"
      }, {
        yanse: "黑色",
        leixing: "下单数",
        danshuzongji: "10",
        jine: "552"
      }, {
        yanse: "黑色",
        leixing: "下单数",
        danshuzongji: "10",
        jine: "552"
      },
        {
          yanse: "黑色",
          leixing: "下单数",
          danshuzongji: "10",
          jine: "552"
        }
      ],
      tableData: [{
        Inquiry: '1',
        pendingOrder: '2',
        unconfirmed: '3',
        unsettled: '4',
        track: "5",
        abnormal: "6",
        contract: "7"
      }],
      trackData: [{
        xuanze: false,//选择
        dingdanhao: '66546164',//订单号
        yundanhao: "14324", // 运单号
        xiadanriqi: '2021/03/15',//下单日期
        shouhuofang: '顶呱呱公司',//收货方
        shouhuoren: '隔壁老王',//收货人
        shifa: "北京",//始发
        daoda: "成都",//到达
        chepai: "DJ123456",//车牌
        yunzuozhuangtai: "正常",//运作状态
        jihuafache: "2021/03/16",//计划发车时间
        shijifache: "2021/03/16",//实际发车时间
        yujidaoda: "2021/03/19",//预计到达时间
        xingshisudu: "40",//行驶速度(km/h)
        genzongshijian: "2021/03/18",//跟踪时间
      },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        },
        {
          xuanze: false,//选择
          dingdanhao: '66546164',//订单号
          yundanhao: "14324", // 运单号
          xiadanriqi: '2021/03/15',//下单日期
          shouhuofang: '顶呱呱公司',//收货方
          shouhuoren: '隔壁老王',//收货人
          shifa: "北京",//始发
          daoda: "成都",//到达
          chepai: "DJ123456",//车牌
          yunzuozhuangtai: "正常",//运作状态
          jihuafache: "2021/03/16",//计划发车时间
          shijifache: "2021/03/16",//实际发车时间
          yujidaoda: "2021/03/19",//预计到达时间
          xingshisudu: "40",//行驶速度(km/h)
          genzongshijian: "2021/03/18",//跟踪时间
        }
      ],
      options: [
        {
          value: 'shouhuoren',
          label: '收货人'
        }, {
          value: 'shifadi',
          label: '始发地'
        }, {
          value: 'mudidi',
          label: '目的地'
        }, {
          value: 'dingdanhao',
          label: '订单号'
        }, {
          value: 'yundanhao',
          label: '运单号'
        },{
          value: 'huoming',
          label: '货名'
        }],
      trackValue: '',
      currentPage: 1,
      pageSize: 10,
    }
  },
  components: {
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.trackData = this.trackData.slice((this.currentPage-1)*val,this.currentPage*val);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.trackData = this.trackData.slice((val-1)*this.pageSize,val*this.pageSize);
      console.log(`当前页: ${val}`);
    },
    drawEchart() {
      let myChart = echarts.init(this.$refs.chart);
      // 绘制图表
      myChart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ['product', 'order', 'unsettled', 'settled'],
          source: [
            {product: '1月', 'order': 43, 'unsettled': 65, 'settled': 43},
            {product: '2月', 'order': 53, 'unsettled': 62, 'settled': 42},
            {product: '3月', 'order': 45, 'unsettled': 24, 'settled': 63},
            {product: '4月', 'order': 73, 'unsettled': 35, 'settled': 33},
            {product: '5月', 'order': 33, 'unsettled': 27, 'settled': 43},
            {product: '6月', 'order': 63, 'unsettled': 12, 'settled': 52},
            {product: '7月', 'order': 42, 'unsettled': 62, 'settled': 33},
            {product: '8月', 'order': 73, 'unsettled': 77, 'settled': 43},
            {product: '9月', 'order': 56, 'unsettled': 75, 'settled': 43},
            {product: '10月', 'order': 47, 'unsettled': 45, 'settled': 43},
            {product: '11月', 'order': 13, 'unsettled': 58, 'settled': 33},
            {product: '12月', 'order': 42, 'unsettled': 77, 'settled': 73},
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {
          name: "数量"
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {type: 'bar'},
          {type: 'bar'},
          {type: 'bar'}
        ]
      });
    }
  },
  mounted() {
    this.trackData = this.trackData.slice(0,this.pageSize);
    this.drawEchart();
  },
}
</script>

<style>
.carrierStr {
  color: red;
  text-align: center;
}

.el-aside {
  text-align: center;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-menu {
  text-align: left;
}
div.el-submenu__title {
  height: 40px;
  line-height: 40px;
}
.el-submenu li.el-menu-item {
  height: 40px;
  line-height: 40px;
  min-width: 200px;
}
.personCenter {
  display: block;
  color: white;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}
.personBox {
  width: 1000px;
}
.personalTitle {
  font-size: 18px;
  font-weight: bold;
  text-align: left !important;
  text-indent: 20px;
}
.workBlock {
  width: 100%;
  text-align: left !important;
  font-size: 18px;
  line-height: 30px;
  text-indent: 12px;
  margin: 0 !important;
}
.echartData {
  background-color: #42b983 !important;
}
.el-table .cell{
  text-align: center !important;
}
.contentRight li {
  list-style: none;
  font-size: 16px;
}
.filter {
  display: flex;
}
.el-table td, .el-table th {
  padding: 0 !important;
}
.filter .inputCont {
  margin-right: 10px;
  width: 140px !important;
  height: 30px !important;
}
div.cell{
  padding:0 !important;
}
.departure {
  display: inline-block;
  margin-right: 10px;
  margin-top: -3px;
}
.departure .pickerTime {
  width: 150px !important;
}
.departure p {
  display: inline-block;
  font-size: 14px;
  margin: 0;
}
.el-pagination {
  padding: 5px 5px !important;
}
</style>